<template>
  <div>
    <van-nav-bar title="订单" left-arrow fixed @click-left="onClickLeft" />
    <div class="boz"></div>
    <div>选择地址</div>
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
    />
    <div>购买商品</div>
    <div v-for="(item, index) in cart" :key="index">
      <van-card
        class="Cart"
        :num="item.num"
        :price="item.originalPrice"
        :desc="item.characteristic"
        :title="item.name"
        :thumb="item.pic"
      />
    </div>
    <van-submit-bar :price="this.$store.getters.totalPrice" />
    <div class="Order" @click="Onclick">立即支付</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chosenAddressId: "1",
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true,
        },
      ],
    };
  },
  computed: {
    cart: function () {
      return this.$store.state.Cart.cart;
    },
  },
  methods: {
    Onclick() {
      this.$store.state.Cart.cart = [];
      localStorage.setItem("cart", JSON.stringify(this.cart));
      this.$router.push({
        path: "/Cart",
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style  scoped>
.boz {
  width: 100%;
  height: 3rem;
}
.van-button {
  margin-top: -29rem;
  opacity: 0;
}
.Order {
  width: 20%;
  height: 3rem;
  background: red;
  color: #fff;
  line-height: 3rem;
  border-radius: 0.5rem;
  text-align: center;
  position: fixed;
  left: 18.5rem;
  bottom: 0rem;
  z-index: 100;
}
</style>